<template>
  <router-view v-if="$route.path == '/login'"></router-view>
  <el-container class="layout-container-demo" style="height: 100%" v-else>
    <el-header
      style="
        text-align: right;
        font-size: 12px;
        display: flex;
        align-items: center;
      "
    >
      <div style="margin-right: auto; font-weight: 700; font-size: 20px">
        校园零食商城管理后台
      </div>
      <div class="toolbar">
        <el-dropdown>
          <el-icon style="margin-right: 8px; margin-top: 1px">
            <setting color="#fff" />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="editPassword"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item
                @click="
                  store.$reset();
                  $router.push('/login');
                "
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span>{{ store.userName }}</span>
      </div>
    </el-header>

    <el-container>
      <el-aside
        style="transition: width 0.5s"
        :width="isCollapse ? '64px' : '180px'"
      >
        <el-scrollbar style="height: calc(100vh - 120px)">
          <el-menu :collapse="isCollapse" router :default-active="$route.path">
            <el-menu-item
              v-for="item in $router
                .getRoutes()
                .filter((route) => route.meta?.isMenu)"
              :key="item.path"
              :index="item.path"
            >
              <el-icon><component :is="item.meta.icon"></component></el-icon>
              <template #title>{{ item.meta.title }}</template></el-menu-item
            >
          </el-menu>
        </el-scrollbar>
        <div class="collapse-btn" @click="isCollapse = !isCollapse">
          <el-icon
            :style="{
              transform: `rotate(${isCollapse ? 0 : 180}deg)`,
              transition: 'transform 0.5s',
            }"
          >
            <DArrowRight
          /></el-icon>
        </div>
      </el-aside>
      <el-main>
        <el-scrollbar style="height: calc(100vh - 60px)">
          <div style="padding: 20px; box-sizing: border-box">
            <router-view v-slot="{ Component }">
              <transition name="slide-fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  Avatar,
  List,
  Goods,
  PieChart,
  Message,
  Setting,
  DArrowRight,
} from "@element-plus/icons-vue";
import { useUserStore } from "./stores/userInfo";
import { ElMessageBox } from "element-plus";
import { changePassword } from "@/api/user";
import { useRouter } from "vue-router";
const isCollapse = ref(false);
const router = useRouter();
const store = useUserStore();
const editPassword = () => {
  ElMessageBox.prompt("请输入新密码", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /^[a-zA-Z0-9]{6,20}$/,
    inputErrorMessage: "密码只能是字母和数字，且长度为6-20位",
    inputType: "password",
  })
    .then(async (action) => {
      await changePassword(store.id, action.value);
      ElMessageBox.alert("修改成功", "提示", {
        confirmButtonText: "确定",
      }).then(() => {
        store.$reset();
        router.push("/login");
      });
    })
    .catch(() => {});
};
</script>

<style scoped lang="less">
.layout-container-demo .el-header {
  position: relative;
  background-color: #2b303b;
  color: var(--el-text-color-primary);
  color: #fff;
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: #fff;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.collapse-btn {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover {
    background: #f5f7fa;
  }
}
</style>
<style>
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.slide-fade-enter-from {
  transform: translateX(-20px);
  opacity: 0;
}
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.slide-fade-enter-to,
.slide-fade-leave-from {
  transform: translateX(0);
  opacity: 1;
}
</style>
